<template>
  <div class="user">
    <div class="top">
      <div>
          <img :src='src' alt="">
        <p>{{ user }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserVue',
  data () {
    return {
      user: 'username',
      src: ''
    }
  },
  components: {

  },
  mounted () {
    this.user = window.localStorage.getItem('username') || '易趣购'
    const avatar = localStorage.getItem('avatar')
    // 加载本地静态资源的时候 require
    this.src = avatar || require('@/assets/user.png')
    this.transmit()
  },
  methods: {
    transmit () {
      console.log(this.user)
      this.$store.commit('addUser', this.user)
    }
  }
}
</script>

<style lang="scss" scoped>
.top{
  width: 100%;
  height: 4rem;
}
.top>img{
  float: right;
}
.user{
  width: 100%;
  text-align: center;
}
.user img{
  position: relative;
  left: 50%;
  top: 1rem;
  transform: translate(-50%);
  border-radius: 50%;
  width: 50px;height: 50px;
  display: block;
}
.user p {
  position: relative;
  top: .7rem;
}
</style>
